// HomeScreen.js
import React, { useState } from 'react';
import {
  View,
  Text,
  ScrollView,
  StyleSheet,
  TouchableOpacity,
  Alert,
} from 'react-native';
import { Screen, ScreenFooter } from 'react-native-screens'; // 引入核心组件
import { SafeAreaView } from 'react-native-safe-area-context'; // 安全区域适配
import { TextInput } from 'react-native-gesture-handler';

const ScreenFooterDemo = () => {

  const [text, setText] = useState('');
  // Footer 按钮点击事件
  const handleFooterBtnClick = (btnName: string) => {
    // Alert.alert('ScreenFooter 点击', `你点击了「${btnName}」按钮`);
    console.info(`test js screen footer 你点击了「${btnName}」按钮`)
  };

  return (
    <View style={styles.screenContainer}>

            <TextInput
              style={styles.input}
              onChangeText={setText}
              value={text}
              placeholder="请输入文本"
            />

      {/* 安全区域包裹：避免内容被刘海屏/导航栏遮挡 */}
      <SafeAreaView style={styles.safeArea} edges={['top', 'left', 'right']}>
        {/* 主内容区域：可滚动（用 ScrollView 包裹长内容） */}
        <ScrollView style={styles.content}>
          <Text style={styles.title}>主内容区域</Text>
          <View style={styles.card}>
            <Text style={styles.cardText}>
              这是 react-native-screens + ScreenFooter 的 Demo 示例。
              {'\n\n'}ScreenFooter 会固定在屏幕底部，不随内容滚动。
              {'\n\n'}可点击底部按钮触发交互。
            </Text>
          </View>
          {/* 模拟长内容，验证 Footer 固定效果 */}
          {Array(15)
            .fill(0)
            .map((_, index) => (
              <View key={index} style={styles.listItem}>
                <Text style={styles.listText}>列表项 {index + 1}</Text>
              </View>
            ))}
           <TextInput
              style={styles.input}
              onChangeText={setText}
              value={text}
              placeholder="请输入文本"
            />
        </ScrollView>
      </SafeAreaView>

        <TextInput
          style={styles.input}
          onChangeText={setText}
          value={text}
          placeholder="请输入文本"
        />

      {/* -------------- ScreenFooter 核心：固定在底部 -------------- */}
      <ScreenFooter style={styles.footer}>      
      
        {/* 安全区域适配：避免 Footer 被底部横条（如 iPhone 底部指示条）遮挡 */}
        <SafeAreaView style={styles.footerSafeArea} edges={['bottom']}>
          {/* Footer 内容：可自定义（如按钮、文本、图标等） */}
          <View style={styles.footerContent}>
            {/* 左侧按钮 */}
            <TouchableOpacity
              style={styles.footerBtn}
              onPress={() => handleFooterBtnClick('首页')}
            >
              <Text style={styles.footerBtnText}>首页</Text>
            </TouchableOpacity>
            {/* 中间分割线 */}
            <View style={styles.footerDivider} />
            {/* 右侧按钮 */}
            <TouchableOpacity
              style={styles.footerBtn}
              onPress={() => handleFooterBtnClick('我的')}
            >
              <Text style={styles.footerBtnText}>我的</Text>
            </TouchableOpacity>
          </View>
        </SafeAreaView>
      </ScreenFooter>

    </View>
  );

  // // {/* Screen 组件：react-native-screens 的核心容器，替代普通 View */}
  // return (    
  //   <Screen style={styles.screenContainer}>

  //         <TextInput
  //             style={styles.input}
  //             onChangeText={setText}
  //             value={text}
  //             placeholder="请输入文本"
  //           />
  //     {/* 安全区域包裹：避免内容被刘海屏/导航栏遮挡 */}
  //     <SafeAreaView style={styles.safeArea} edges={['top', 'left', 'right']}>
  //       {/* 主内容区域：可滚动（用 ScrollView 包裹长内容） */}
  //       <ScrollView style={styles.content}>
  //         <Text style={styles.title}>主内容区域</Text>
  //         <View style={styles.card}>
  //           <Text style={styles.cardText}>
  //             这是 react-native-screens + ScreenFooter 的 Demo 示例。
  //             {'\n\n'}ScreenFooter 会固定在屏幕底部，不随内容滚动。
  //             {'\n\n'}可点击底部按钮触发交互。
  //           </Text>
  //         </View>
  //         {/* 模拟长内容，验证 Footer 固定效果 */}
  //         {Array(10)
  //           .fill(0)
  //           .map((_, index) => (
  //             <View key={index} style={styles.listItem}>
  //               <Text style={styles.listText}>列表项 {index + 1}</Text>
  //             </View>
  //           ))}

  //         <TextInput
  //             style={styles.input}
  //             onChangeText={setText}
  //             value={text}
  //             placeholder="请输入文本"
  //           />
  //       </ScrollView>
  //     </SafeAreaView>


  //     <TextInput
  //             style={styles.input}
  //             onChangeText={setText}
  //             value={text}
  //             placeholder="请输入文本"
  //           />

  //     {/* -------------- ScreenFooter 核心：固定在底部 -------------- */}
  //     <ScreenFooter style={styles.footer}>      
      
  //       {/* 安全区域适配：避免 Footer 被底部横条（如 iPhone 底部指示条）遮挡 */}
  //       <SafeAreaView style={styles.footerSafeArea} edges={['bottom']}>
  //         {/* Footer 内容：可自定义（如按钮、文本、图标等） */}
  //         <View style={styles.footerContent}>
  //           {/* 左侧按钮 */}
  //           <TouchableOpacity
  //             style={styles.footerBtn}
  //             onPress={() => handleFooterBtnClick('首页')}
  //           >
  //             <Text style={styles.footerBtnText}>首页</Text>
  //           </TouchableOpacity>
  //           {/* 中间分割线 */}
  //           <View style={styles.footerDivider} />
  //           {/* 右侧按钮 */}
  //           <TouchableOpacity
  //             style={styles.footerBtn}
  //             onPress={() => handleFooterBtnClick('我的')}
  //           >
  //             <Text style={styles.footerBtnText}>我的</Text>
  //           </TouchableOpacity>
  //         </View>
  //       </SafeAreaView>
  //     </ScreenFooter>
  //   </Screen>
  // );
};

// 样式表
const styles = StyleSheet.create({
  screenContainer: {
    flex: 1,
    backgroundColor: '#F9F9F9',
  },
  safeArea: {
    flex: 1,
  },
  content: {
    flex: 1,
    padding: 16,
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 16,
    color: '#333',
  },
  card: {
    backgroundColor: 'white',
    borderRadius: 8,
    padding: 16,
    marginBottom: 16,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 2, // Android 阴影
  },
  cardText: {
    fontSize: 14,
    color: '#666',
    lineHeight: 22,
  },
  listItem: {
    backgroundColor: 'white',
    borderRadius: 6,
    padding: 12,
    marginBottom: 8,
  },
  listText: {
    fontSize: 14,
    color: '#333',
  },

  // ------------------- ScreenFooter 样式 -------------------
  footer: {
    backgroundColor: 'white',
    borderTopWidth: 1,
    borderTopColor: '#EEEEEE',
    // 固定 Footer 高度（根据内容调整）
    height: 56,
  },
  footerSafeArea: {
    flex: 1,
  },
  footerContent: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
  },
  footerBtn: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    height: '100%',
  },
  footerBtnText: {
    fontSize: 16,
    color: '#2196F3', // 蓝色按钮文本
    fontWeight: '500',
  },
  footerDivider: {
    width: 1,
    height: '60%',
    backgroundColor: '#EEEEEE',
  },
  container: {
    padding: 10,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    paddingLeft: 10,
    marginTop: 40,
  },
});

export default ScreenFooterDemo;